<template>
	<view class="container">
		<!-- 商品卡 -->
		<view class="good_card">
			<u-image width="100%" height="600rpx" class="u-p-t-10" :src="goods_item.cover_url"></u-image>
			<view class="item_title u-line-1">{{goods_item.title}}</view>
			<view class="u-flex u-row-between u-p-r-60 u-p-l-60">
				<view class="item_price ">￥{{goods_item.price}}</view>
				<view class="item_sales ">日期:{{goods_date}} </view>
			</view>
		</view>

		
		<!-- 导航条 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" class="tab-bar"></u-tabs>
		<!-- 分页栏 -->
		<view class="u-p-b-60 u-m-b-60">
			<!-- 商品详情 -->
			<view class="u-content u-p-l-60 u-p-r-60 u-m-t-30" v-if="current==0?true:false">
					<u-parse :html="goods_item.details"></u-parse>
			</view>
			<!-- 商品推荐 -->
			<u-row gutter="36rpx" class="u-skeleton" v-if="current==2?true:false">
				<u-col span="6" v-for="goods in goods_list.length != 0 ? goods_list : [{},{},{},{},{},{}]" >
					<goods-card :goods="goods"></goods-card>
				</u-col>
			</u-row>
		</view>
		
		<!-- 底栏 -->
		<view class="navigation">
				<view class="left">
					<!-- 收藏 -->
					<view class="item" @click="collect" v-if="!isCollect">
						<u-icon name="star" :size="40" color="black"></u-icon>
						<view class="text u-line-1">收藏</view>
					</view>

					<view class="item" @click="collect" v-if="isCollect">
						<u-icon name="star" :size="40" color="red"></u-icon>
						<view class="text u-line-1" style="color: red;">已收藏</view>
					</view>
					<!-- 购物车 -->
					<view class="item car" @tap="goCar">
						<u-badge class="car-num" :count="car_num" type="error" :offset="[-3, -6]"></u-badge>
						<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="right">
					<view class="cart btn u-line-1" @click="addShopCar">加入购物车</view>
					<view class="buy btn u-line-1">立即购买</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		async onReachBottom() {
			console.log("到底了")
			if(this.current !== 2) return
			//请求商品推荐
			const goods_list = await this.$u.api.getGoodsList({recommend:1})
			this.goods_list = [...this.goods_list,...goods_list.goods.data]
		},
		data() {
			return {
				list: [{
					name: '商品简介'
				}, {
					name: '商品评价'
				}, {
					name: '相关推荐',

				}],
				current: 0,
				goods_id:"",
				goods_item:{},
				src:"",
				goods_date:"",
				goods_list:[],
				isCollect:false,
				car_num:0
			}
		},
		methods: {
			goCar(){
				//跳转购物车
				this.$u.route({
					type:"switchTab",
					url:"/pages/car/car"
				})
			},
			change(index) {
				this.current = index;
			},
			async collect(){
				// 收藏
				await this.$u.api.checkCollect(this.goods_id)
				this.isCollect = !this.isCollect
				this.isCollect ? this.$u.toast("收藏成功") : this.$u.toast("取消收藏")
				
			},
			async addShopCar(){
				// 添加购物车
				await this.$u.api.addShopCar({goods_id:this.goods_id})
				this.$u.toast("商品加入成功")
				this.getCarNum()
			},
			async getCarNum(){
				// 获取购物车数量
				const antu = this.vuex_token
				if(!antu) return
				const {data} = await this.$u.api.getShopCarList()
				this.car_num = data.length
				

			}
		},
		async onLoad(options) {
			//拿到商品id
			this.goods_id = options.id
			//请求商品信息
			const goods_Info = await this.$u.api.getGoodsInfo(this.goods_id)
			this.goods_item = goods_Info.goods
			//是否收藏
			this.isCollect = this.goods_item.is_collect
			//处理时间
			this.goods_date = this.goods_item.created_at
			this.goods_date = this.goods_date.slice(0,this.goods_date.lastIndexOf("T"))
			//请求商品推荐
			const goods_list = await this.$u.api.getGoodsList({recommend:1})
			this.goods_list = goods_list.goods.data
			//获取购物车数量
			this.getCarNum()
			
			
		}
	}
</script>

<style lang="scss" scoped>
.navigation {
	bottom: 0;
	position: fixed;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0rpx;
	width: 100%;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 20rpx 0 50rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 40rpx;
			margin-left: 40rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
.item_title{
	color: rgba(0,0,0,.7);
	width: 100%;
	text-align: center;
	font-weight: 750;
	font-size: 45rpx;
	margin-top: 5rpx;
	padding: 5rpx;
}
.item_price{
	color: #ff3333;
	font-size: 45rpx;
	padding: 10rpx;
}
.item_sales{
	font-size: 25rpx;
	color: #888;
}

.good_card{
	margin-bottom: 10rpx;
	box-shadow: rgba(0,0,0,.1) 5rpx 5rpx 5rpx ;

}
</style>
